<template>
	<uni-popup ref="popup" type="center" :mask-click="maskClick">
		<view class="detail-popup">
			<!-- 弹窗头部 -->
			<view class="popup-header">
				<text class="title">{{ title }}</text>
				<uni-icons @click="close" type="close" size="20" color="#fff"></uni-icons>
			</view>

			<!-- 弹窗内容 -->
			<view class="popup-content">
				<slot></slot>
			</view>
			<!-- 底部按钮 -->
			<view class="popup-footer" v-if="showFooter">
				<button class="close-btn" @click="close" v-if="showClose">
					<uni-icons type="close" size="18" color="#fff"></uni-icons>
					<text>{{ closeText }}</text>
				</button>
				<button class="print-btn" @click="confirm" v-if="showConfirm">
					<uni-icons type="checkbox" size="18" color="#fff"></uni-icons>
					<text>{{ confirmText }}</text>
				</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	const props = defineProps({
		title: {
			type: String,
			default: '发票打印预览',
		},
		closeText: {
			type: String,
			default: '关闭',
		},
		confirmText: {
			type: String,
			default: '确认',
		},
		showClose: {
			type: Boolean,
			default: true,
		},
		showConfirm: {
			type: Boolean,
			default: true,
		},
		showFooter: {
			type: Boolean,
			default: true,
		},
		maskClick: {
			type: Boolean,
			default: false,
		},
	});

	const popup = ref(null);

	// 打开预览
	const open = () => {
		popup.value.open();
	};

	// 关闭预览
	const close = () => {
		console.log('close');
		popup.value.close();
	};

	const emit = defineEmits(['confirm']);

	// 确认打印
	const confirm = () => {
		emit('confirm');
	};

	// 暴露方法供父组件调用
	defineExpose({
		open,
		close,
	});
</script>

<style lang="scss" scoped>
	.detail-popup {
		width: 520px;
		background: #fff;
		border-radius: 15px;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			background: linear-gradient(135deg, #4a90e2, #357abd);
			color: #fff;
			border-radius: 15px 15px 0 0;

			:deep(.uni-icons) {
				font-size: 18px !important;
			}

			.title {
				font-size: 18px;
				font-weight: 500;
			}
		}

		.popup-content {
			padding: 15px;
			padding-bottom: 100px;
			box-sizing: border-box;
			max-height: 80vh;
			overflow-y: auto;
		}
		.popup-footer {
			padding: 20px;
			text-align: center;
			background: #f8f8f8;
			border-top: 1px solid #eee;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			border-radius: 0 0 15px 15px;
			display: flex;
			gap: 15px;
			justify-content: center;

			.close-btn,
			.print-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 30px;
				height: 38px;
				font-size: 14px;
				border: none;
				width: 220px;
				border-radius: 24px;
				transition: all 0.3s ease;
				gap: 6px;

				&:hover {
					transform: translateY(-1px);
				}

				&:active {
					transform: translateY(0);
				}
			}

			.close-btn {
				color: #fff;
				background: linear-gradient(135deg, #606c88, #3f4c6b);
				box-shadow: 0 2px 6px rgba(74, 144, 226, 0.2);

				&:hover {
					box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
				}
			}

			.print-btn {
				color: #fff;
				background: linear-gradient(135deg, #ff4d4f, #ff7875);
				box-shadow: 0 2px 6px rgba(255, 77, 79, 0.2);

				&:hover {
					box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
				}
			}
		}
	}
</style>
